import React, { useState } from 'react';
import { BottomAction } from '@/components';
import { Button, message, Popconfirm } from 'antd';
import { history } from 'umi'
import { useRequest } from '@/hooks';
import { addHidata, saveDraft } from '@/pages/Setting/Privilege/services';
import { hasWorkFlowByType } from '@/pages/WorkFlow/utils';
import CancelEditConfirm from '@/components/CancelEditConfirm';
/**
 *
 * @param {*} saveValue 保存的数据
 * @param {*} submitValue 提交的数据
 * @param {*} isChange 表单是否发生变化
 */
const FooterButton = ({ beforeSave, saveValue, submitValue }) => {
    const [popConfirmVisible, setPopConfirmVisible] = useState(false);
    const [loading, setLoading] = useState(false);
    const { loading: loadingSave, run: handleSave } = useRequest(() => saveDraft(saveValue), {
        manual: true,
        onSuccess: e => {
            const { code, msg } = e;
            if (code === 10000) {
                message.success('保存成功');
                setPopConfirmVisible(false);
            } else {
                message.error(msg);
            }
        }
    });
    const { loading: loadingSubmit, run: handleSubmit } = useRequest(() => addHidata(submitValue), {
        manual: true,
        onSuccess: async e => {
            const { code, data, msg } = e;
            if (code === 10000) {
                // 流程不存在提示
                const { workFlowUrl } = await hasWorkFlowByType('authManageApply');
                if (workFlowUrl) {
                    history.push(`${workFlowUrl}${data}`);
                }
            } else {
                message.error(msg);
            }
        }
    });

    // 采用取巧方法，这边点击下一步的时候，先调用保存的方法，然后再进行下一步
    const { loading: loadingSubmit2, run: handleSubmit2 } = useRequest(() => saveDraft(saveValue), {
        manual: true,
        onSuccess: e => {
            const { code, msg } = e;
            if (code === 10000) {
                handleSubmit();
            } else {
                message.error(msg);
            }
        }
    });

    // 保存前要获取新的数据来判断是否有草稿数据
    const handleBeforeSave = async () => {
        if (beforeSave) {
            setLoading(true);
            const isChange = await beforeSave();
            if (isChange) {
                setPopConfirmVisible(true);
            } else {
                handleSave();
            }
            setLoading(false);
        } else {
            handleSave();
        }
    };

    return (
        <BottomAction>
            <CancelEditConfirm>
                <Button>取消</Button>
            </CancelEditConfirm>

            <Popconfirm
                visible={popConfirmVisible}
                title={
                    <>
                        存在已保存内容，确定继续保存？
                        <br />
                        <span style={{ fontSize: 12, color: '#F04134' }}>继续保存将覆盖已保存内容</span>
                    </>
                }
                arrowPointAtCenter
                onConfirm={() => {
                    handleSave();
                }}
                onCancel={() => {
                    setPopConfirmVisible(false);
                }}
                okText="继续保存"
                cancelText="取消"
            >
                <Button loading={loading || loadingSave} ghost type="primary" onClick={handleBeforeSave}>
                    保存
                </Button>
            </Popconfirm>
            <Button
                loading={loadingSubmit2 || loadingSubmit}
                type="primary"
                onClick={() => {
                    handleSubmit2();
                }}
            >
                下一步
            </Button>
        </BottomAction>
    );
};
export default FooterButton;
